<template>
  <div
    class="index-page"
    id="indexPage"
  >
    <div class="index-page-title animated bounceInDown">
      <!-- <span>国防科技大学运维中心</span> -->
      <span>中达BIM数据中心</span>
    </div>
    <!-- <earth></earth> -->
    <server-room v-show="isSrShow"></server-room>
    <transition name="slide-fade">
      <div
        class="Data-box"
        v-show="isDataShow"
      >
        <div class="content">
          <div class="box-left animated bounceInLeft">
            <pie-chart></pie-chart>
            <BreakdownCicle></BreakdownCicle>
          </div>
          <div
            class="box-right animated bounceInRight"
            id="theBoxRight"
          >
            <!-- 优化只显示一个模型 要显示4个模型注释掉 -->
            <div class="server-container">
              <server :id='5'></server>
            </div>
            <!-- 优化只显示一个模型 要显示4个模型注释掉 -->
            <el-carousel
              :interval="60000"
              arrow="always"
              id="el-carousel"
              :loop='true'
              @change='change'
            >
              <el-carousel-item
                v-for="(item,index) in hostId"
                :key="index"
              >
                <div class="right-content">
                  <div class="first-box">
                    <LineChartOne
                      :currentIndex='currentIndex'
                      :currentItemIndex='index'
                      :hostId='item.hostId'
                      :oneId=index+1
                    >
                    </LineChartOne>
                    <TerminalMemory
                      :currentItemIndex='index'
                      :hostId='item.hostId'
                    ></TerminalMemory>
                  </div>
                  <div class="second-box">
                    <!-- 优化只显示一个模型 要显示4个模型注释掉 -->
                    <div class="img-btn-box">
                      <div class="btns prev-btn">
                        <img
                          src="../assets/images/prev.png"
                          alt=""
                        >
                      </div>
                      <span>服务器 {{index+1}}</span>
                      <div class="btns next-btn">
                        <img
                          src="../assets/images/next.png"
                          alt=""
                        >
                      </div>
                    </div>
                    <!-- 优化只显示一个模型 要显示4个模型注释掉  放开下方server-->
                    <!-- <server :num='index' :id=index+1></server> -->
                    <hardware-info
                      :currentItemIndex='index'
                      :currentIndex='currentIndex'
                      :hostId='item.hostId'
                    ></hardware-info>
                  </div>
                  <div class="therd-box">
                    <LineChartTwo
                      :LineTwoDatas='LineTwoDatas'
                      :currentItemIndex='index'
                      :hostId='item.hostId'
                      :twoId=index+1
                    ></LineChartTwo>
                    <LineChartThree
                      :currentIndex='currentIndex'
                      :currentItemIndex='index'
                      :hostId='item.hostId'
                      :threeId=index+1
                    >
                    </LineChartThree>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="bottom animated bounceInUp">
          <TerminalCpu :ipArr="ipArr"></TerminalCpu>
          <MemoryTerminal :ipArr="ipArr"></MemoryTerminal>
          <live-box></live-box>
          <online-number></online-number>
        </div>
        <div class="btn-box">
          <transition
            name="fade"
            enter-active-class="animated fadeInDown"
            leave-active-class="animated fadeOutUp"
            :duration="1200"
          >
            <span
              class="is-data-show"
              v-if="isDataShow"
              @click="closeDataPanel()"
            >收起数据</span>
          </transition>
        </div>
      </div>
    </transition>
    <div class="btn-box">
      <transition
        name="fade"
        leave-active-class="animated fadeOutUp"
        :duration="1200"
      >
        <span
          class="is-data-show"
          v-if='!isDataShow'
          @click="showDataPanel()"
        >展示数据</span>
      </transition>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import $ from 'jquery'
import animate from 'animate.css'
import OnlineNumber from "@/components/OnlineNumber"
import Server from "@/components/Server"
import PieChart from '@/components/PieChart'

import LineChartOne from '@/components/LineChartOne'
import LineChartTwo from '@/components/LineChartTwo'
import LineChartThree from '@/components/LineChartThree'
import HardwareInfo from "@/components/HardwareInfo"
import LiveBox from "@/components/LiveBox"


import TerminalCpu from '@/components/TerminalCpu'
import TerminalMemory from '@/components/TerminalMemory'
import BreakdownCicle from '@/components/BreakdownCicle'
import MemoryTerminal from '@/components/MemoryTerminal'

// import Earth from "@/components/earth/Earth"
import ServerRoom from '@/components/ServerRoom'
export default {
  data() {
    return {
      valueCarousel: 0,
      isLivingShow: false,
      hostId: [],
      isDataShow: true,
      theRotateNum: 0,
      hostIdArr: [],
      ipArr: [],
      currentIndex: 0,
      isSrShow: true,
      //测试轮播页调当页接口
      LineTwoDatas: null
    }
  },
  components: {
    OnlineNumber,
    Server,
    PieChart,
    HardwareInfo,
    LineChartOne,
    LineChartTwo,
    LineChartThree,
    TerminalCpu,
    TerminalMemory,
    BreakdownCicle,
    LiveBox,
    MemoryTerminal,
    // Earth,
    ServerRoom
  },
  mounted() {
    //设置轮播图高度
    document.getElementById('el-carousel').style.height = this.height;

    window.onresize = function () {
      var offsetWid = document.documentElement.clientWidth;
      var offsetHei = document.documentElement.clientHeight;
      console.log(offsetHei)
    }
    // document.addEventListener("resize", function () {
    //   console.log(document)
    // })
  },
  created() {
    this.getServerList();
  },
  methods: {
    getServerList() {
      var _this = this;
      var data = {
        "jsonrpc": "2.0",
        "method": "host.get",
        "params": {
          "output": ["hostid"],
          "selectGroups": "extend",
          "filter": {
            "host": []
          }
        },
        "auth": localStorage.getItem('auth'),
        "id": localStorage.getItem('currentId')
      }
      this.$http.post('/zabbix/api_jsonrpc.php', data).then(
        res => {
          if (res.result.length) {

            var arr = []
            _this.hostIdArr = []
            res.result.forEach((v, index) => {
              if (v.groups[0].name == 'Linux servers')
                arr.push({
                  hostId: v.hostid
                })
              if (v.groups[0].name == "win") {
                _this.hostIdArr = _this.hostIdArr.concat(v.hostid);
              }
            });
            for (let i = 0; i < 4; i++) {
              _this.hostId.push(arr[i])
            }
            _this.getServerInfo()
          }
        },
        err => {
          console.log(err);
        }
      )
    },
    //收起数据面板
    closeDataPanel() {
      this.isDataShow = false;
      this.isSrShow = true;
    },
    //展开数据面板
    showDataPanel() {
      this.isDataShow = true;;
      this.isSrShow = false;
    },
    // 获取该hostid对应的东西
    getServerInfo() {
      var _this = this;
      var data = {
        jsonrpc: "2.0",
        method: "host.get",
        params: {
          output: ["hostid", "host"],
          selectInterfaces: ["interfaceid", "ip"]
        },
        auth: localStorage.getItem("auth"),
        id: localStorage.getItem("currentId")
      };
      this.$http.post("/zabbix/api_jsonrpc.php", data).then(
        res => {
          if (res.result) {
            _this.cpuArr = []
            res.result.forEach((v, index) => {
              for (let item of _this.hostIdArr) {
                if (v.hostid == item) {
                  _this.ipArr.push({
                    hostid: v.hostid,
                    ip: v.interfaces[0].ip
                  })
                }
              }
            });
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    change(val1, val2) {
      // console.log(val1,val2);
      this.currentIndex = val1;
      // this.getLineTwoDatas(val1);
    },
    //测试轮播到当前页 调用当前页接口
    // getDatas(obj,index){
    //   console.log('传进来的index',index)
    //   var _this=this;
    //   var data={
    //     "jsonrpc": "2.0",
    //     "method": "item.get",
    //     "params": {
    //         "output": "extend",
    //         "hostids": this.hostId[index],
    //         "search": obj,
    //         "sortfield": "name"
    //     },
    //     "auth": localStorage.getItem('auth'),
    //     "id": localStorage.getItem('currentId')
    //   }
    //   return new Promise((resolve,reject)=>{
    //     _this.$http.post('/zabbix/api_jsonrpc.php',data).then(
    //       res=>{
    //         resolve(res.result);
    //       },
    //       err=>{
    //         reject('获取数据失败，请检查网络状况，或稍后刷新页面..')
    //       }
    //     )
    //   })
    // },
    // async getLineTwoDatas(index){
    //   this.LineTwoDatas= await this.getDatas({"key_":"memory"},index);
    //   console.log('getLineTwoDatas调用了')
    //   // return res;
    // }
  }
}
</script>

<style scoped lang='scss'>
@import "../style/mixin.scss";

.index-page {
  width: 100%;
  height: 100%;
  // padding-top: 135px; /* 135/16 */
  // background: url('../assets/images/bg.png') no-repeat center;
  // background-size: 100% 100%;
  // overflow: hidden;

  .Data-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding-top: 135px;
    padding-bottom: 60px;
    position: absolute;
    // top: 135px;
    top: 0;
    left: 0;
    z-index: 888;
    background: url("../assets/images/bg5.png") no-repeat center;
    // background-position-y: -135px;
    background-size: cover;
    // overflow: hidden;

    .content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 655px; /* 655/16 */
      background: transparent;
      // border: 1px dashed #fff;

      .box-left {
        width: 422px;
        height: 100%;
        background: transparent;
        // border: 1px dashed #fff;
      }

      .box-right {
        position: relative;
        flex: 1;
        display: block;
        // width: 1500px;
        height: 100%;

        .server-container {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          width: 33%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 33%;
          background: transparent;
          padding-top: 45px;
          z-index: 999;
        }

        .right-content {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: space-around;
        }

        .first-box {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: 33%;
          height: 100%;
        }

        .second-box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 33%;
          height: 100%;
          padding-bottom: 30px;

          .img-btn-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 20px;
            width: 100%;
            height: 76px;

            span {
              font-size: 22px;
              font-weight: 800;
              background: linear-gradient(to bottom, #d1e4ec, #8beaf7);
              -webkit-background-clip: text;
              color: transparent;
            }
          }
        }

        .therd-box {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: 33%;
          height: 100%;
        }
      }

      // .ivu-carousel{
      //   display: flex;
      //   flex: 1;
      //   height: 100%;
      // }

      // .ivu-carousel-list{
      //   width: 1500px;
      //   height: 100%;
      // }
      // .ivu-carousel-track{
      //     display: flex;
      //     justify-content: space-around;
      //     // flex: 1;
      //     width: 1500px;
      //     height: 100%;
      // }
    }

    .bottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      // height: 238px;
      flex: 1;
      background: transparent;
      // border: 1px dashed #fff;
    }
    #Living {
      // position: absolute;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      background: #fff;
      z-index: 999;
    }
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 40px;

    span {
      font-size: 24px;
      font-weight: 700;
      background: linear-gradient(to bottom, #d1e4ec, #8beaf7);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .index-page-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 40px;
    z-index: 999;

    span {
      font-size: 44px;
      font-weight: 700;
      background: linear-gradient(to bottom, #d1e4ec, #8beaf7);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .slide-fade-enter-active {
    transition: all 0.8s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(-200px);
    opacity: 0;
  }
}
</style>
<style>
.el-carousel {
  height: 100% !important;
}
.el-carousel__container {
  height: 100% !important;
}
#screen-shader {
  height: 100% !important;
  width: 100% !important;
  background: none !important;
}
</style>

